<template>
    <div class="metal-statics-page">
         <div class="header">
            <div class="header-title">
                <h1>存欠汇总</h1>
                <el-button @click="refreshData" :loading="loading" icon="Refresh" class="refresh-button">
                    刷新
                </el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="customers" v-loading="loading" style="width: 100%">
                <el-table-column prop="name" label="客户" fixed min-width="120"></el-table-column>

                <el-table-column label="存欠款" min-width="100">
                    <template #default="scope">
                        {{ formatFundAmount(scope.row.fundAmount) }}
                    </template>
                </el-table-column>

                <el-table-column v-for="commodity in metalCommodities" :key="commodity.id"
                    :label="'存欠' + commodity.standard" :prop="'metalBalance_' + commodity.id" min-width="120">
                    <template #default="scope">
                        {{ formatMetalBalance(scope.row, commodity) }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

import { MetalStatics } from '../../public/engine/metal/metalStatics'
import {deleteCustomersMetalBalanceNetworkCache} from '../../public/network/api'

export default {
    name: 'mstatics',
    data() {
        return {
            metalStatics: new MetalStatics(),
            customers: [],
            metalCommodities: [],
            loading: false
        };
    },
    async mounted() {
        await this.loadData();
    },
    methods: {
        async refreshData() {
            deleteCustomersMetalBalanceNetworkCache();
            await this.loadData();
        },
        async loadData() {
            this.loading = true;
            try {
                await this.metalStatics.initData();
                this.metalCommodities = this.metalStatics.metalCommodities;

                // Get customer data
                this.customers = this.metalStatics.customers;

                console.log('customers:', this.customers);
            } catch (error) {
                console.error('Failed to load data:', error);
            } finally {
                this.loading = false;
            }
        },

        formatFundAmount(fundAmount) {
            if (!fundAmount || fundAmount.value === 0) {
                return '';
            }
            return fundAmount.value;
        },

        formatMetalBalance(customer, commodity) {
            if (!customer.transactionBalacnes || !commodity.metalAccountTypeId) {
                return '';
            }

            const balance = customer.transactionBalacnes.find(tb =>
                tb.metalFundType &&
                tb.metalFundType.id === commodity.metalAccountTypeId
            );

            return balance ? balance.balance.value : '';
        }
    }
};
</script>

<style scoped>
.metal-statics-page {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100%;
}

.header {
    margin-bottom: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.header-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header h1 {
    font-size: 24px;
    color: #333;
    margin: 0;
}

.content {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
</style>